<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="referrer" content="no-referrer" />
    <title>我的网址</title>
  </head>

  <body>
    <div id="mainPanel" class="mainPanel"></div>

    <script type="text/javascript">
      var panelDataArr = [
        //**********
        //**********
        {
          TT常用网址: "./TT常用网址.html",
          开发技术: "./开发技术.html",
          任务管理:
            "http://gitlab-devops.tech-trans.com/ken.dai/task-manage/-/boards",
          my任务: "https://gitee.com/rugejun/my-task/board",
          技能拼图: "https://gitee.com/rugejun/my-skill-boost/board",
          TT任务: "http://gitlab-devops.tech-trans.com/ken.dai/ken/-/boards",
          TT笔记:"http://gitlab-devops.tech-trans.com/ken.dai/tt-ken-notes/-/boards",
        },
                //**********
        { 
          "#title": "AI平台",
          包阅AI: ["https://baoyueai.com/home", "智能阅读工具，文档、视频一键总结、要点摘抄、内容优化"] 
        },
        //**********
        {
          "#title": "学习平台",
          掘金: "https://juejin.cn/recommended",
          博客园: "https://home.cnblogs.com/u/dken",
        },

        //**********
        {
          "#title": "my项目",
          "vue-template": {
            url: "https://gitee.com/rugejun/vue-template",
            hint: "vue项目模板",
          },
        },
        //**********

        {
          "#title": "低代码",
          lowcode: "https://lowcode-engine.cn/index",
          钉钉宜搭: "https://developers.aliwork.com/",
          腾讯微搭: "https://console.cloud.tencent.com/lowcode",
        },
        {
          "#title": "文凭、证书",
          广开: "https://course.ougd.cn/",
          广开题库: "http://183.6.149.210:9988/",
        },
        //**********
        {
          "#title": "工具",
          百度翻译: "https://fanyi.baidu.com/#en/zh/",
          json格式化: "https://www.json.cn/",
          二维码生成器: "https://cli.im/",
        },
        //**********
        {
          "#title": "公开课",
          网易公开课: "https://open.163.com/",
          中国大学MOOC: "https://www.icourse163.org/",
        },
        //**********
        {
          "#title": "开发教程平台",
          菜鸟教程: "https://www.runoob.com/",
        },
        //**********
        {
          "#title": "vue js",
          vue网站导航: "https://vue3js.cn/",
          "vue-element-admin":
            "https://panjiachen.github.io/vue-element-admin-site/zh/",
          JS图表库ECharts: "https://echarts.apache.org/examples/zh/index.html",
          桌面端组件库Element:
            "https://element.eleme.cn/#/zh-CN/component/installation",
          primevue: ["https://primevue.org/", "Vue3、响应式"],
          移动组件库MintUI: "http://mint-ui.github.io/#!/zh-cn",
          OpenTiny: [
            "https://opentiny.design/tiny-vue/zh-CN/smb-theme/overview",
            "华为云开源的支持Vue2和Vue3,支持PC端和移动端组件库",
          ],
        },
        //**********
        {
          "#title": "web",
          ES6教程: "https://www.runoob.com/w3cnote/es6-tutorial.html",
          mozilla: "https://developer.mozilla.org/zh-CN/",
          "flex 布局语法教程":
            "https://www.runoob.com/w3cnote/flex-grammar.html",
          //---
          "#sub": "web插件",
          "图标字体库 font-awesome": "https://fontawesome.dashgame.com/",
          bootstrap5:
            "https://www.runoob.com/bootstrap5/bootstrap5-tutorial.html",
          "bootstrap-vue": "https://bootstrap-vue.org/docs/components",
          swiper轮播: "https://www.swiper.com.cn/",
          AntDesign: ["https://ant.design/index-cn", "阿里的Web应用UI组件"],
        },
        //**********
        {
          "#title": "项目模板",
          vue开源项目库: "https://github.com/opendigg/awesome-github-vue",
          若依: "http://www.ruoyi.vip/",
          unimall商城模板: "https://gitee.com/iotechn/unimall",
          意向商城系统:
            "https://gitee.com/guchengwuyue/yshopmall#%E9%A1%B9%E7%9B%AE%E7%AE%80%E4%BB%8B",
        },
        //**********
        {
          "#title": "Webpack",
          Webpack中文文档: "https://webpack.docschina.org/concepts/",
          多角度解析Loader核心原理:
            "https://juejin.cn/post/7036379350710616078",
        },

        //**********
        {
          "#title": "开源项目",
          小米米家: "https://github.com/XiaoMi/ha_xiaomi_home",
        },
        //**********
        {
          "#title": "其他",
          试试吧AI: ["https://aisdks.com/welcome", "邮箱 + dk1-6"],
        },

        //**********
      ];

      window.onload = function () {
        refresh("mainPanel", panelDataArr);
      };
    </script>

    <script type="text/javascript">
      function refresh(elId, panelDatas) {
        //*************************
        console.log(panelDatas);
        var mainPanel = document.getElementById(elId);
        for (var idx in panelDatas) {
          var panelData = panelDatas[idx];
          var panDom = parseDom("<div class='itemPanel'></div>");

          const title = panelData["#title"];
          if (title) {
            title2Dom[title] = panDom;
            panDom.appendChild(
              parseDom(
                `<div class='panTitle' onclick='shiftPut("${title}")'>${title} <i class='panPutIcon'></i></div>`
              )
            );
          }

          for (var name in panelData) {
            const value = panelData[name];
            if (name == "#title") {
              continue;
            }
            if (name == "#sub" || name.indexOf("#sub-") >= 0) {
              panDom.appendChild(
                parseDom("<p class='subTitle'>--- " + value + "</p>")
              );
            } else {
              const info =
                typeof value == "string"
                  ? { url: value }
                  : Array.isArray(value)
                  ? { url: value[0], hint: value[1] }
                  : value;
              panDom.appendChild(
                parseDom(
                  `<a href= '${info.url}' title='${
                    info.hint || ""
                  }'  target='_blank' class='link'>${name}</a>`
                )
              );
            }
          }
          mainPanel.appendChild(panDom);
        }
        refreshPut();
      }

      const title2Dom = {};
      const putUpInfo = JSON.parse(localStorage.getItem("putUpInfo") || "{}");
      function refreshPut() {
        for (let title in putUpInfo) {
          const dom = title2Dom[title];
          if (!dom) continue;
          putUpInfo[title]
            ? dom.setAttribute("putUp", "")
            : dom.removeAttribute("putUp");
        }
      }
      function shiftPut(title) {
        putUpInfo[title] = !putUpInfo[title];
        refreshPut();
        localStorage.setItem("putUpInfo", JSON.stringify(putUpInfo));
      }

      function parseDom(htmlText) {
        var objE = document.createElement("div");
        //去除头尾空格，防止空格成为节点
        htmlText =
          htmlText == null ? "" : htmlText.replace(/(^\s*)|(\s*$)/g, "");
        objE.innerHTML = htmlText;
        return objE.childNodes[0];
      }
    </script>

    <style>
      body {
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
      }

      .mainPanel {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin-left: 30px;
        margin-right: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
        min-height: 1000px;
      }

      .itemPanel {
        width: 300px;
        min-height: 20px;
        margin: 12px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
      }

      .panTitle {
        position: relative;
        text-align: center;
        font-size: 18px;
        margin: 0;
        color: #551a88;
        cursor: pointer;
        user-select: none;
      }

      .panPutIcon {
        position: absolute;
        right: 0;
        top: 0;
      }

      .panPutIcon::after {
        content: "↓";
        position: absolute;
        right: 0;
        top: -5px;
        font-size: 20px;
        padding: 0 0 15px 15px;
      }

      .subTitle {
        font-size: 14px;
        margin: 8px 10px 8px 0px;
        color: gray;
      }

      .link {
        text-decoration: none;
        margin: 8px 10px 8px 15px;
        font-size: 16px;
      }

      .itemPanel[putUp] .subTitle,
      .itemPanel[putUp] .link {
        display: none;
      }

      .itemPanel[putUp] .panPutIcon::after {
        content: "↑";
      }
    </style>
  </body>
</html>
